import Taro from '@tarojs/taro';
import { View, Image, Button} from '@tarojs/components';
import { connect } from '@tarojs/redux';
import * as detailApi from './service';
import './index.scss';
import { Component } from 'nervjs';
import MySwiper from '../../components/MySwiper';

@connect(({goods}) => ({
    ...goods,
}))
export default class Detail extends Component {

    config = {
        navigationBarTitleText: '',
    };

    componentDidMount() {
        this.setState({
            goodsId: this.props._$router.params.id,
        })

        this.getGoodsInfo(this.props._$router.params.id);
    }

    async getGoodsInfo(goodsId) {
        const res = await detailApi.getProductInfo({
            id: goodsId
        });
        if (res.status == 'ok') {
            let imgList;
            if (res.data.images){
                imgList = res.data.images.map((item) => {
                    return {
                        image_src: item,
                    };
                });
            } else {
                imgList = [{
                    image_src: "http://static-r.msparis.com/uploads/d/1/d1ca37e902e5550ad2c82c721bc216ce.png",
                }];
            }
            Taro.setNavigationBarTitle({
                title: res.data.name
            })
            this.setState({
                detail: res.data,
                imageObj: imgList,
            })
        }
    }

    render() {
        const { imageObj, detail, specificationsList } = this.state;
        return (
          <View className="detail-page">
            <View className="image-box-wrap">
              <View className="image-box clearfix">
                <MySwiper banner={imageObj} />
                <View className="share-btn">
                  <Button open-type="share" />
                </View>
              </View>
            </View>
            { /* 底部操作栏 */ }
            {/* <View className="detail-bottom-btns">
              <View className="nav" data-url="/pages/home/index" onClick={this.goToPage}>
                <Image className="nav-img" src={require('../../images/tab/home.png')} alt="" />
                首页
              </View>
              <View className="nav" onClick={this.makePhoneCall}>
                <Image className="nav-img" src={require('../../images/icon/customerservice.png')} alt="" />
                客服
              </View>
              <View className="nav" data-url="/pages/cart/index" onClick={this.goToPage}>
                <Image className="nav-img" src={require('../../images/tab/cart.png')} alt="" />
                衣袋
                { items.length > 0 && <View className="zan-badge__count">{items.length}</View> }
              </View>
              <View className={currentChooseId == '' ? 'join join-disabled' : 'join'} onClick={this.join}>加入衣袋</View>
            </View> */}
          </View>
        );
      }
}